<template>
    <div class="login-container">
        <div class="login">
            <h2>登录</h2>
            <div class="form-group">
                <!-- <label for="username">用户名</label> -->
                <input type="text" id="username" placeholder=" 用户名" v-model="username" required />
            </div>
            <div class="form-group">
                <!-- <label for="password">密码</label> -->
                <input type="password" id="password" placeholder=" 密码" v-model="password" required />
            </div>
            <div class="form-group">
                <!-- <label for="role">身份</label> -->
                <select id="role" v-model="role" required>
                    <option value="customer">顾客</option>
                    <option value="seller">销售员</option>
                </select>
            </div>
            <button type="submit" class="login-button" @click="handleLogin">登录</button>
            <div class="register-link">
                <!-- <a href="/register">没有账号？注册</a> -->
                <router-link to="/register">没有账号？注册</router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { post, get } from "../until/request";

const username = ref('');       //输入的登录名
const password = ref('');       //输入的密码
const role = ref('customer');   // 默认选择顾客
const router = useRouter();

// 用户登录
const handleLogin = async () => {
    if (!username.value || !password.value || !role.value) {
        alert('请填写所有字段');
        return;
    }
    // 调用后端API进行登录验证
    console.log('用户名:', username.value);
    console.log('密码:', password.value);
    console.log('角色:', role.value);
    // 这里可以添加API调用逻辑
    post("/api/login", {
        username: username.value,
        password: password.value,
        role: role.value
    }).then((res) => {
        if (res.code === 1) {
            // console.log(res);
            getUserInfo();
            localStorage.setItem("token", res.msg);

        }
    });
};

// 获取用户信息
const getUserInfo = async () => {
    await get("/user/getUserByName", {
        username: username.value
    }).then((res) => {
        localStorage.setItem("login", JSON.stringify(res.data));
        // router.push({ name: "HomeContent" });
        if (res.data.role === 'customer') {
            router.push({ name: "HomeContent" });
        } else {
            router.push({ name: "ProductManagement" });
        }
    });
};
</script>

<style lang="scss" scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;

    .login {
        background-color: #fff;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 300px;
        text-align: center;

        h2 {
            margin-bottom: 1.5rem;
            color: #333;
        }

        .form-group {
            margin-bottom: 1rem;
            text-align: left;

            label {
                display: block;
                margin-bottom: 0.5rem;
                color: #555;
            }

            input,
            select {
                width: 100%;
                padding: 0.5rem 0;
                border: 1px solid #ccc;
                border-radius: 4px;
                font-size: 1rem;
            }
        }

        .login-button {
            width: 100%;
            padding: 0.75rem;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;

            &:hover {
                background-color: #0056b3;
            }
        }

        .register-link {
            margin-top: 1rem;
            font-size: 15px;

            a {
                color: #007bff;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>
